/**
 * 功能：我的所有银行卡
 * 入口：钱包首页，银行卡查看更多
 * 
 */
import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import HomeHeader from '../../components/Header/index.jsx'
import {logger,http} from 'common/index'
import { Link,hashHistory,browserHistory } from 'react-router';
import BankCard from './subpage/BankCard/BankCard'
import Refresh from 'components/Refresh/index'
//redux
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import DanluJsBridge from 'common/jsBridge'
import * as walletInfoActionsFromOtherFile from '../../store/actions/walletinfo' 


class BankCardList extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state  ={ 
            choosedCard : ''
        }
    }
    componentWillMount () { 
        var _this = this;
        DanluJsBridge.callHandler('setTitle', {
            title: '我的银行卡',
            color: "#ff444444",
        })
        
        DanluJsBridge.callHandler("setBackBtnColor", {
          color: '#ff444444'
        });

        DanluJsBridge.callHandler('setTitleBarColor', {
            color: ['#fff9f9f9','#fff9f9f9']
        }, function() {
            alert(123)
        })

        

        //判断是否具有对私账户
        if (this.props.walletinfo.payAccountInfo.personAccount) {
            DanluJsBridge.callHandler('setOptionMenu', {menus:[{
                    title: '添加',
                    color: '#ff444444',
                }]}, function(response) {
            })
            DanluJsBridge.registerHandler('handlerNativeMessage',function(e,callBack){
                if (e.event == 'optionMenuClickEvent') {
                    hashHistory.push( '/addBankCard')
                }
                // callBack(1);
            })
        }   
        // 更新银行卡列表
        this.getBindCards();
        //判断是否有选中的银行卡
        if (this.props.location.query.acc_type) {

            if (this.props.walletinfo.choosedCard) {
                this.setState({
                    choosedCard : this.props.walletinfo.choosedCard
                })               
            }else{
                var choosedCard = ""
                this.props.walletinfo.bindCards.map(bank =>{ 
                    //对公卡号
                    if (bank.cardType != '3' && !choosedCard) {
                        choosedCard = bank
                    }
                })
                this.setState({
                    choosedCard : choosedCard
                }) 
                this.props.walletinfoActions.walletInfoUpdate({
                    choosedCard : choosedCard
                })
            }




        }
    }
    componentWillUnmount(){
        DanluJsBridge.callHandler('setOptionMenu', {menus:[{
                title: '',
                color: '#ff444444',
            }]}, function(response) {
        })
    }
    //下拉刷新
    refreshFn (){

    }

    //查询绑定的银行卡
    getBindCards (){
        var reqData = {
            "userId": this.props.walletinfo.user.userId,
            "companyId": this.props.walletinfo.user.companyId
        }
        http.post('/dlpcweb/dlpc/pc/V1/wallet/getBindCardList',reqData).then((data) =>{
            var bindCards = data || []
            this.props.walletinfoActions.walletInfoUpdate({
                bindCards : bindCards
            })
            
        })
    }

    bankCardClick(card){
        this.setState({
            choosedCard : card,
        })
        this.props.walletinfoActions.walletInfoUpdate({
            choosedCard : card
        })
        //跳转到转账页面
        browserHistory.goBack()
    }

    render() {
        const cardList = this.state.cardList
        var bindCards = this.props.walletinfo.bindCards || []

        return (
        	<div>
                <div >
            		<HomeHeader title="我的银行卡" className="heaer-border">
                        <Link to="/addBankCard">添加</Link>
                    </HomeHeader>
                </div>
                <div >
                    {/*<Refresh refreshFn={this.refreshFn.bind(this)}/>*/}
                        {
                            bindCards.map((item,index) =>{ 
                                if (!this.props.location.query.acc_type) {
                                    return <BankCard  card={item}  key={index}  />
                                }else if(item.cardType != '3'){
                                    return <BankCard  card={item}  key={index}  showCheckBox={true} choosed={this.state.choosedCard.bankCardNo == item.bankCardNo} onClick={this.bankCardClick.bind(this)}/>
                                }
                                
                            } )
                        }
                        {
                            bindCards.length == 0 ? <div className="padding10 align-center">暂无银行卡</div> : ''
                        }
                        
                </div>
        	</div>
        )
    }
}


// -------------------redux react 绑定--------------------

function mapStateToProps(state) {
    return {
        walletinfo: state.walletinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
        walletinfoActions: bindActionCreators(walletInfoActionsFromOtherFile, dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BankCardList)
